<template>
  <div class="registerDetail">
    <div class="task_header">
      <div class="top_title">
        <div class="top_title_back" @click="onClickLeft">
          <i class="iconfont icon-back"></i>
        </div>
        <div class="top_title_val">{{ $route.meta.title }}</div>
      </div>
    </div>
    <div class="vip_detail">
      <van-field v-model="dataSource.memberName" input-align="right" readonly label="会员名称" placeholder="" />
      <van-field v-model="dataSource.mobile" input-align="right" readonly label="手机号码" placeholder="" />
      <van-field v-model="dataSource.currentGradeName" input-align="right" readonly label="会员等级" placeholder="" />
      <van-field class="val_status" v-model="dataSource.ownerStatus" input-align="right" readonly label="车主认证状态" placeholder="" />
      <van-tabs v-model="active" color="#3975c6" :sticky="true" @click="changeTabs">
        <van-tab title="绑车信息">
          <div class="curInfo">
            <div class="curInfo_title">当前绑定车辆</div>
            <div class="tableData pb0" v-if="bindCar && bindCar.length != 0">
              <div class="tableDatabox">
                <table>
                  <tr>
                    <th>车架号</th>
                    <th>车牌号</th>
                    <th>绑定时间</th>
                  </tr>
                  <tbody v-if="bindCar && bindCar.length != 0">
                    <tr v-for="(item, index) in bindCar" :key="index">
                      <td>{{ item.vinCode }}</td>
                      <td>{{ item.carNo }}</td>
                      <td>{{ item.bindDate ? item.bindDate.slice(0, 10) : '' }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="no_icon" v-else>
              <img class="no_icon_img" src="@/assets/images/no_icon.png" />
              <div class="no_icon_txt">暂无内容</div>
            </div>
          </div>

          <div class="curInfo">
            <div class="curInfo_title">行驶证信息</div>
            <div class="tableData pb0" v-if="carDrivingList && carDrivingList.length != 0">
              <div class="tableDatabox">
                <table>
                  <tr>
                    <th>车架号</th>
                    <th style="width: 70px;">车牌号</th>
                    <th style="width: 70px;">上传时间</th>
                    <th style="width: 80px">行驶证照片</th>
                  </tr>
                  <tbody v-if="carDrivingList && carDrivingList.length != 0">
                  <tr v-for="(item, index) in carDrivingList" :key="index">
                    <td style="word-break: break-all;vertical-align: middle;">{{ item.vin }}</td>
                    <td style="word-break: break-all;vertical-align: middle;">{{ item.carNo }}</td>
                    <td style="word-break: break-all;vertical-align: middle;">{{ item.uploadTime ? item.uploadTime.slice(0, 10) : '' }}</td>
                    <td style="word-break: break-all;vertical-align: middle;"><a href="javascript:;" @click="showPic(item.imgUrl)" style="text-decoration: underline; color: #3975c6">点击查看</a></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="no_icon" v-else>
              <img class="no_icon_img" src="@/assets/images/no_icon.png" />
              <div class="no_icon_txt">暂无内容</div>
            </div>
          </div>

          <div class="curInfo">
            <div class="curInfo_title">历史绑车记录</div>
            <div class="tableData" v-if="bindCarHis && bindCarHis.length != 0">
              <div class="tableDatabox">
                <table>
                  <tr>
                    <th class="vinNolen">车架号</th>
                    <th style="width: 60px">车牌号</th>
                    <th>绑定结果</th>
                    <th style="width: 60px">绑定时间</th>
                  </tr>
                  <tbody v-if="bindCarHis && bindCarHis.length != 0">
                    <tr v-for="(item, index) in bindCarHis" :key="index">
                      <td class="vinNolen">{{ item.vinCode }}</td>
                      <td>{{ item.carNo }}</td>
                      <td>{{ item.bindResultType }}</td>
                      <td>{{ item.bindDate ? item.bindDate.slice(0, 10) : '' }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="no_icon" v-else>
              <img class="no_icon_img" src="@/assets/images/no_icon.png" />
              <div class="no_icon_txt">暂无内容</div>
            </div>
          </div>
        </van-tab>
        <van-tab title="积分信息">
          <div class="tableData">
            <div class="allScore">
              <div class="allScore_item">
                <div class="item_label">当前积分</div>
                <div class="item_val">{{ dataSource.currentPoint1 }}</div>
              </div>
              <div class="allScore_item">
                <div class="item_label">累计获得积分</div>
                <div class="item_val">{{ dataSource.totalGet1 }}</div>
              </div>
              <div class="allScore_item">
                <div class="item_label">累计使用积分</div>
                <div class="item_val">{{ dataSource.totalUsed1 }}</div>
              </div>
            </div>
            <div class="score_title">积分变动明细</div>

            <div class="tableDatabox" v-if="pointRecord && pointRecord.length != 0">
              <table>
                <tr>
                  <th style="width: 80px">积分变动值</th>
                  <th style="width: 65px">积分生效日</th>
                  <th style="width: 65px">积分失效日</th>
                  <th>备注</th>
                </tr>
                <tbody v-if="pointRecord && pointRecord.length != 0">
                  <tr v-for="(item, index) in pointRecord" :key="index">
                    <td :class="Number(item.changePoint) < 0 ? 'cut' : 'add'">{{ Number(item.changePoint) < 0 ? '' : '+' }}{{ item.changePoint }}</td>
                    <td>{{ item.effectDate ? item.effectDate.slice(0, 10) : '' }}</td>
                    <td>{{ item.overDate ? item.overDate.slice(0, 10) : '' }}</td>
                    <td>{{ item.remark }}</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div class="no_icon" v-else>
              <img class="no_icon_img" src="@/assets/images/no_icon.png" />
              <div class="no_icon_txt">暂无内容</div>
            </div>
          </div>
        </van-tab>
        <van-tab title="卡券明细">
          <div class="curInfo">
            <div class="curInfo_title">会员卡券明细</div>
            <div class="tableData pb0" v-if="memberCouponInfoList && memberCouponInfoList.length != 0">
              <div class="tableDatabox">
                <table>
                  <tr>
                    <th>券码</th>
                    <th>券名称</th>
                    <th>状态</th>
                    <th>发放时间</th>
                  </tr>
                  <tbody v-if="memberCouponInfoList && memberCouponInfoList.length != 0">
                  <tr v-for="(item, index) in memberCouponInfoList" :key="index">
                    <td>{{ item.couponCode }}</td>
                    <td>{{ item.couponName }}</td>
                    <td>{{ item.cardState }}</td>
                    <td>{{ item.grantAt? item.grantAt.slice(0,19): '' }}</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="no_icon" v-else>
              <img class="no_icon_img" src="@/assets/images/no_icon.png" />
              <div class="no_icon_txt">暂无内容</div>
            </div>
          </div>
        </van-tab>
        <van-tab title="权益使用情况">
          <div class="curInfo">
            <div class="curInfo_title">权益卡券使用情况</div>
            <div class="tableData pb0" v-if="couponReceivedList && couponReceivedList.length != 0">
              <div class="tableDatabox">
                <table>
                  <tr>
                    <th>年度</th>
                    <th>卡券名称</th>
                    <th>使用情况</th>
                  </tr>
                  <tbody v-if="couponReceivedList && couponReceivedList.length != 0">
                  <tr v-for="(item, index) in couponReceivedList" :key="index">
                    <!-- 合并年度列 -->
                    <template v-if="!item.noteHidden">
                      <td :rowspan="item.noteRowspan" style="text-align: center; vertical-align: middle;">{{ item.year }}</td>
                    </template>
                    <td>{{ item.couponName }}</td>
                    <td>{{ item.useStatus }}</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="no_icon" v-else>
              <img class="no_icon_img" src="@/assets/images/no_icon.png" />
              <div class="no_icon_txt">暂无内容</div>
            </div>
          </div>
        </van-tab>

        <div v-if="['kqmx', 'qysyqk'].includes(activeName) && totalPages > 0" style="margin: 15px 0 30px;font-size: 12px;text-align: center;padding-bottom: 30px;">
          <button :disabled="currentPage === 1" @click="prevPage">上一页</button>

<!--          <button-->
<!--            v-if="currentPage > 1"-->
<!--            @click="goToPage(currentPage - 1)"-->
<!--          >-->
<!--            {{ currentPage - 1 }}-->
<!--          </button>-->

          <button
            style="font-weight: bold;"
            disabled
          >
            {{ currentPage }}
          </button>

<!--          <button-->
<!--            v-if="currentPage < totalPages"-->
<!--            @click="goToPage(currentPage + 1)"-->
<!--          >-->
<!--            {{ currentPage + 1 }}-->
<!--          </button>-->

          <button :disabled="currentPage === totalPages" @click="nextPage">下一页</button>
        </div>
      </van-tabs>

    </div>

    <van-image-preview v-model="showPicDialog" :images="carDrivingImg" />
<!--    <van-dialog v-model="showPicDialog" width="100%" :close-on-click-overlay="false">-->
<!--      <div style="width: 100%; height: 100%;">-->
<!--        <van-swipe :autoplay="3000">-->
<!--          <van-swipe-item v-for="(item, index) in carDrivingImg" :key="index">-->
<!--            <van-image :src="item"/>-->
<!--          </van-swipe-item>-->
<!--        </van-swipe>-->
<!--      </div>-->
<!--    </van-dialog>-->
  </div>
</template>

<script>
import { Toast } from 'vant'
import vipInfoApi from '@/api/vipInfoApi'
import carApi from '../../api/carApi'

export default {
  name: 'vipInfoDetail',
  components: { Toast },
  data() {
    return {
      active: 0,
      memberId: '',
      value: '',
      dataSource: {},
      bindCar: [],
      bindCarHis: [],
      pointRecord: [],
      showPicDialog: false,
      carDrivingImg: [],
      carDrivingList: [],
      memberCouponInfoList: [],
      couponReceivedList: [],

      activeName: '',
      pageSize: 20,
      currentPage: 1,
      totalPages: 0
    }
  },

  mounted() {
    console.log(this.$route.query.memberId)
    if (this.$route.query && this.$route.query.memberId) {
      this.memberId = this.$route.query.memberId
      this.getDetail(this.memberId)
      this.getCarDrivingInfo(this.memberId)
      // this.queryMemberCouponInfo(this.memberId)
      // this.queryCouponReceived(this.memberId)
    }
  },
  methods: {
    sortByDateDesc(array, key) {
      return array.sort((a, b) => {
        if (a[key] && b[key]) {
          // 如果两个时间都有值，则按照降序比较
          return new Date(b[key]) - new Date(a[key])
        } else if (a[key] && !b[key]) {
          // 如果a有值而b无值，放在前面
          return -1
        } else if (!a[key] && b[key]) {
          // 如果a无值而b有值，放在后面
          return 1
        } else {
          // 如果两者都无值，相等，保持原始顺序
          return 0
        }
      })
    },
    getDetail(memberId) {
      Toast.loading('加载中...')
      vipInfoApi.getMemberInformationById({ memberId }).then((res) => {
        Toast.clear()
        if (res.code == 1) {
          if (res.data) {
            this.dataSource = res.data
            this.bindCar = this.dataSource.bindCar
            this.bindCarHis = this.dataSource.bindCarHis
            this.pointRecord = this.dataSource.pointRecord
            this.dataSource.memberName = this.dataSource.memberName ? this.dataSource.memberName : '-'
            this.dataSource.mobile = this.dataSource.mobile ? this.dataSource.mobile : '-'
            this.dataSource.ownerStatus = this.dataSource.ownerStatus ? this.dataSource.ownerStatus : '-'

            //临时处理
            this.bindCarHis.forEach(item => {
              if(item.bindResultType == '07') {
                item.bindResultType = '车辆绑定失败-手机号不一致'
              }
              if(item.bindResultType == '08') {
                item.bindResultType = '车辆绑定失败-车牌号不一致'
              }
              if(item.bindResultType == '09') {
                item.bindResultType = '车辆绑定失败-资料不一致'
              }
            })
            // this.bindCarHis.forEach((item) => {
            //   if (item.bindResultType == '车辆绑定失败-系统') {
            //     item.bindResultType = '车辆绑定失败-系统中不存在'
            //   }
            //   if (item.bindResultType == '车辆绑定失败-不一') {
            //     item.bindResultType = '车辆绑定失败-不一致'
            //   }
            // })
            // this.bindCar.sort(function (a, b) {
            //   return a.bindDate < b.bindDate ? 1 : -1
            // })
            // this.bindCarHis.sort(function (a, b) {
            //   return a.bindDate < b.bindDate ? 1 : -1
            // })
            // this.pointRecord.sort(function (a, b) {
            //   return a.createDate < b.createDate ? 1 : -1
            // })
            // this.pointRecord = this.sortByDateDesc(this.pointRecord, 'effectDate')
          } else {
          }
        }
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    getCarDrivingInfo(memberId){
      this.carDrivingList.length = 0
      carApi.getCarDrivingInfo({ member_id: memberId }).then((res) => {
        if (!!res.data && res.data.length > 0) {
          this.carDrivingList = res.data
        }
      })
    },
    showPic(data) {
      this.carDrivingImg = data.split(';')
      this.showPicDialog = true
    },
    changeTabs(name, title) {
      if (title == '卡券明细') {
        this.activeName = 'kqmx'
        this.currentPage = 1
        this.totalPages = 0
        this.queryMemberCouponInfo(this.memberId)
      }
      if (title == '权益使用情况') {
        this.activeName = 'qysyqk'
        this.currentPage = 1
        this.totalPages = 0
        this.queryCouponReceived(this.memberId)
      }
    },
    queryMemberCouponInfo(memberId) {
      this.memberCouponInfoList.length = 0
      vipInfoApi.queryMemberCouponInfo({ memberId: memberId, pageNo: this.currentPage, pageSize: this.pageSize }).then((res) => {
        if (!!res.items && res.items.length > 0) {
          this.memberCouponInfoList = res.items
          this.totalPages = res.totalPage
        }
      })
    },
    queryCouponReceived(memberId) {
      this.couponReceivedList.length = 0
      vipInfoApi.queryCouponReceived({ memberId: memberId, pageNo: this.currentPage, pageSize: this.pageSize }).then((res) => {
        if (!!res.items && res.items.length > 0) {
          let arr = res.items
          this.couponReceivedList = this.mergedFollowHistoryList(arr,'year')
          this.totalPages = res.totalPage
        }
      })
    },
    mergedFollowHistoryList(dataList,column) {
      const list = dataList.map(item => ({ ...item }));

      for (let i = 0; i < list.length; i++) {
        if (list[i].noteHidden) continue;

        list[i].noteRowspan = 1;

        for (let j = i + 1; j < list.length; j++) {
          if (list[i][column] === list[j][column]) {
            list[i].noteRowspan++;
            list[j].noteHidden = true;
          } else {
            break;
          }
        }
      }
      return list;
    },

    goToPage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page;
        this.activeNameChange()
      }
    },
    prevPage() {
      this.goToPage(this.currentPage - 1);
    },
    nextPage() {
      this.goToPage(this.currentPage + 1);
    },
    activeNameChange() {
      if (this.activeName == 'kqmx') {
        this.queryMemberCouponInfo(this.memberId)
      }
      if (this.activeName == 'qysyqk') {
        this.queryCouponReceived(this.memberId)
      }
    }
  },
}
</script>

<style lang="less" scoped>
.task_header {
  background: url('~@/assets/images/title_bg.png') no-repeat center;
  font-size: 0.24rem;
  height: 45px;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;

  .top_title {
    position: relative;
    width: 100%;
    height: 50px;

    .top_title_back {
      position: absolute;
      left: 10px;
      line-height: 50px;
      color: #fff;
    }

    .top_title_val {
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-weight: bold;
      font-size: 16px;
    }
    .task_transbox {
      position: absolute;
      right: 10px;
      top: 20px;
      color: #fff;
      z-index: 10;
      font-weight: 400;
      font-size: 12px;
      text-align: center;
      .task_trans {
        width: 24px;
        display: block;
        margin: auto;
      }
    }
  }

  .task_header_data {
    .task_header_date {
      margin-bottom: 10px;
      display: flex;
      align-items: center;

      .task_header_date_w {
        width: 12.5%;
      }

      .task_header_date_item {
        width: 12.5%;
        text-align: center;
        color: #fff;
        font-size: 14px;
      }
    }

    .task_header_followData {
      display: flex;
      align-items: center;
      color: #fff;
      margin-bottom: 10px;

      .task_header_followData_tt {
        width: 12.5%;
        text-align: center;
      }

      .task_header_followData_item {
        width: 12.5%;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
      }
    }
  }
}
.vip_detail {
  padding-top: 50px;
  .curInfo {
    .curInfo_title {
      margin-top: 20px;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      position: relative;
      &::before {
        content: '';
        background: #ccc;
        width: 100px;
        height: 1px;
        position: absolute;
        left: 20px;
        top: 6px;
      }
      &::after {
        content: '';
        background: #ccc;
        width: 100px;
        height: 1px;
        position: absolute;
        right: 20px;
        top: 6px;
      }
    }
    .cur_list {
      margin-top: 20px;
      .cur_item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .cur_index {
          font-size: 16px;
          text-align: center;
          width: 40px;
        }
        .cur_content {
          background: #f7f7f7;
          width: 300px;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          padding: 10px;
          border-radius: 5px;
          .cur_box {
            width: 50%;
            margin-bottom: 15px;
            .cur_label {
              text-align: center;
              font-size: 14px;
              margin-bottom: 10px;
              color: #999;
            }
            .cur_val {
              text-align: center;
              font-size: 14px;
              font-weight: bold;
              color: #333;
            }
          }
        }
      }
    }
  }
}
.mb0 {
  margin-bottom: 0 !important;
}
.tableData {
  margin: 0 16px;
  // height: 500px;
  border-collapse: collapse;
  text-align: center;
  // height: auto; /* 自动计算高度 */
  border-radius: 2px;
  overflow-x: hidden;
  margin-top: 20px;
  padding-bottom: 50px;

  .tableDatabox {
    // overflow-x: scroll;
  }

  table {
    // min-width: 800px;
    font-size: 10px;
    border: none;
    width: 100%;
    table-layout: fixed;
  }
  .last_item td {
    font-weight: bold;
  }

  .tab_item {
    background: #3975c6;
  }
  tr > td:first-child {
    // position: sticky;
    // left: 0;
    // z-index: 1;
    // background: #3975c6;
    // color: #fff;
  }
  tr > th:first-child {
    // position: sticky;
    // left: 0;
    // z-index: 1;
    // background: #286bc2;
    // color: #fff;
  }

  tr {
    th {
      position: sticky; /* 将表头固定在位置 */
      top: 0; /* 与容器顶部对齐 */
      font-size: 12px;
      border: 1px solid #6da0e4;
      padding: 10px 0;
      background: #286bc2;
      color: #fff;
      font-weight: bold;
    }
    td {
      padding: 5px 0;
      border: 1px solid #6da0e4;
      color: #333;
      font-size: 10px;
    }
  }
}
.val_status {
  /deep/ .van-field__control--right {
    color: rgb(206, 0, 0);
  }
}
.add {
  color: rgb(216, 0, 0) !important;
}
.cut {
  color: rgb(1, 226, 50) !important;
}
/deep/ .van-tabs__wrap {
  // box-shadow: 0 3px 6px -2px gray;
  border-bottom: 1px solid #e9e9e9;
}
.pb0 {
  padding-bottom: 0 !important;
}
.allScore {
  display: flex;
  align-items: center;
  background: #f7f7f7;
  border-radius: 3px;
  padding: 10px;
  margin-bottom: 20px;
  .allScore_item {
    text-align: center;
    width: 33.33%;
    .item_label {
      margin-bottom: 10px;
      font-size: 12px;
      color: #999;
    }
    .item_val {
      font-size: 14px;
      color: #333;
      font-weight: bold;
    }
  }
}
.score_title {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  margin-bottom: 20px;
  &::before {
    content: '';
    background: #ccc;
    width: 100px;
    height: 1px;
    position: absolute;
    left: 20px;
    top: 6px;
  }
  &::after {
    content: '';
    background: #ccc;
    width: 100px;
    height: 1px;
    position: absolute;
    right: 20px;
    top: 6px;
  }
}
.no_icon {
  padding: 25px;
  padding-top: 50px;
  background: #fff;
  .no_icon_img {
    width: 70px;
    display: block;
    margin: auto;
  }
  .no_icon_txt {
    font-weight: 400;
    font-size: 14px;
    color: #86909c;
    text-align: center;
    margin-top: 10px;
  }
}
.vinNolen {
  width: 130px;
  max-width: 130px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
</style>
